<!DOCTYPE html>
<html>
<head>
    <title>Page B</title>
    <link rel="stylesheet" href="styles/layout.css">
    <link rel="stylesheet" href="styles/file-list.css">
    <link rel="stylesheet" href="styles/attributes.css">
    <link rel="stylesheet" href="styles/forms.css">
    <link rel="stylesheet" href="styles/buttons.css">
    <link rel="stylesheet" href="styles/projects.css">
    <link rel="stylesheet" href="styles/process.css">
    <link rel="stylesheet" href="styles/recipe.css">
    <link rel="stylesheet" href="styles/attribute-type.css">
    <link rel="stylesheet" href="styles/threshold.css">
    <link rel="stylesheet" href="styles/scrollbar.css">
    <link rel="stylesheet" href="styles/json-format.css">
    <link rel="stylesheet" href="styles/assistant.css">
    <link rel="stylesheet" href="styles/markdown.css">
    <link rel="stylesheet" href="styles/experience.css">
</head>
<body>
    <div class="card-container">
        <div class="green-card left-card">
            <div class="label" id="projectsLabel">项目</div>
            <div class="label" id="propertiesLabel">属性</div>
            <div class="label" id="compositionsLabel">成果</div>
            <div class="label" id="assistantLabel">小助手</div>
            <div class="label" id="experienceLabel">心得</div>
            <div class="label" id="switchprojectLabel">切换</div>
        </div>
        <div class="green-card card-2">
            <div class="file-list" id="fileList"></div>
        </div>
        <div class="green-card card-3">
            <div class="file-content" id="fileContent"></div>
        </div>
        <div class="green-card card-4"></div>
        <div class="green-card right-card">
            <div class="label vertical-text" id="abilityLabel">能力点</div>
            <div class="label vertical-text mode-switch" id="abilityModeSwitch">完整</div>
            <div class="label vertical-text" id="materialLabel">原材料</div>
            <div class="label vertical-text mode-switch" id="materialModeSwitch">完整</div>
            <div class="label vertical-text" id="methodLabel">方法库</div>
            <div class="label vertical-text mode-switch" id="methodModeSwitch">完整</div>
        </div>
    </div>
    <div class="pink-card"></div>


    <script>
        // 动态加载HTML组件
        function loadComponent(name) {
            const common = require('./scripts/common.js');
            try {
                const componentPath = common.getComponentPath(name);
                if (common.fs.existsSync(componentPath)) {
                    return common.fs.readFileSync(componentPath, 'utf8');
                } else {
                    console.error('Component file not found:', componentPath);
                    return '组件文件不存在';
                }
            } catch (error) {
                console.error('Error loading component:', error);
                return '加载组件失败';
            }
        }

        // 初始化各个功能模块
        document.addEventListener('DOMContentLoaded', () => {
            // 先加载通用模块
            const common = require('./scripts/common.js');
            window.common = common;  // 使其在全局可用
            
            // 设置全局函数
            window.loadComponent = loadComponent;
            window.toggleOperator = (varName) => {
                const projectsModule = require('./components/projects.js');
                projectsModule.toggleOperator(varName);
            };
            
            // 加载各个模块的事件处理
            require('./components/projects.js');
            require('./components/properties.js');
            require('./components/compositions.js');
            require('./components/assistant.js');
            require('./components/attributes.js');
            require('./components/switch.js');
            require('./components/experience.js');
        });
    </script>
</body>
</html> 